<template>
  <!-- <MglMap
    :accessToken="accessToken"
    :map-style="mapStyle"
    :center="center"
    :zoom="zoom"
    class="map"
  ></MglMap>-->
  <div>
    <div id="map"></div>
    <div id="info"></div>
  </div>
</template>

<script>
import Mapbox from "mapbox-gl";
// import { MglMap } from "vue-mapbox";
import { ScatterplotLayer, IconLayer } from '@deck.gl/layers';
import { MapboxLayer } from '@deck.gl/mapbox';
import MapboxLanguage from '@mapbox/mapbox-gl-language'


//点标记
const myDeckLayer = new MapboxLayer({
  id: 'my-scatterplot',
  type: ScatterplotLayer,
  data: [
    { position: [121.5286, 31.2186], size: 5, message: 'Hover over me' }
  ],
  stroked: true,
  filled: true,
  pickable: true,
  getPosition: d => d.position,
  getRadius: d => d.size,
  getFillColor: d => [255, 140, 0],
  getLineColor: d => [0, 0, 0],
  lineWidthMinPixels: 1,
  onClick: () => {
    alert('真逗')
  },

});

//图标标记
const ICON_MAPPING = {
  marker: { x: 0, y: 0, width: 32, height: 32, mask: true }
};

const iconLayer = new IconLayer({
  id: 'icon-layer',
  iconAtlas: '../assets/logo.png',
  iconMapping: ICON_MAPPING
})


export default {
  components: {
    // MglMap
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      Mapbox.accessToken = 'pk.eyJ1IjoiamltbXkwMDkiLCJhIjoiY2swNHl2M3owMGl2bzNja2F3emk0OWxvaiJ9.cIYfwmmCkLoyQseAEI6UzQ';
      const map = new Mapbox.Map(
        {
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [121.529, 31.219],
          zoom: 16
        }
      )

      map.on('load', () => {
        map.addLayer(myDeckLayer);
      });

      map.on('mousemove', (e) => {
        document.getElementById('info').innerHTML =       /* innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML  */
          // e.point is the x, y coordinates of the mousemove event relative
          // to the top-left corner of the map
          JSON.stringify(e.point) + '<br />' +
          // e.lngLat is the longitude, latitude geographical position of the event
          JSON.stringify(e.lngLat);  /* JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串 */
      })

      // 设置语言
      var language = new MapboxLanguage({ defaultLanguage: "zh" });
      map.addControl(language);
    }
  },
  data() {
    // return {
    //   accessToken: 'pk.eyJ1IjoiamltbXkwMDkiLCJhIjoiY2swNHl2M3owMGl2bzNja2F3emk0OWxvaiJ9.cIYfwmmCkLoyQseAEI6UzQ', // your access token. Needed if you using Mapbox maps
    //   mapStyle: 'mapbox://styles/jimmy009/ck051d4fy00tj1cob1mtwxl3d',// your map style
    //   center: [121.529, 31.219],
    //   zoom: 16
    // };
    // return;
  },

  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};

</script>

<style>
#map {
  min-height: 800px;
}
#info {
  display: block;
  position: relative;
  margin: 0px auto;
  width: 50%;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #222;
  background: #fff;
}
</style>